<template>
  <view class="action-group" :class="{ disabled, 'plain-disabled': plainDisabled }">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  disabled?: boolean // 完全禁用操作
  plainDisabled?: boolean // 仅样式禁用 仍然触发事件
}>()
</script>

<style lang="less">
@import './actionStyles.less';

.action-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: hidden;
  .font-style;

  &.plain-disabled,
  &.disabled {
    > action-button + action-button > view::before {
      background-color: @disabled-font-color;
    }
  }
  &.disabled {
    pointer-events: none;
  }

  > action-button {
    flex: 1;

    > view {
      position: relative;
    }
    + action-button > view::before {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      width: 2rpx;
      height: 32rpx;
      background-color: #ffffff;
    }
  }
}
</style>
